﻿<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>项目跟踪</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_855021_vv15kuny9ps.css">
    <style>
        .table > tbody > tr > td {
            height: 24px;
            max-height: 24px;
            overflow: hidden;
            position: relative;
        }

        .jiu {
            position: absolute;
            width: 10px;
            height: 10px;
            top: 2px;
            right: 2px;
            background: url("/dist/img/jiu.png");
        }

        .moduleName {
            float: left;
            height: 27px;
            line-height: 27px;
            font-size: 22px;
            width: 100px;
            text-align: center;
        }

        .tryStyle {
            width: 30px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            /* top: 0; */
            right: 0;
            position: absolute;
            border-radius: 5px;
            margin-top: 1px;
            background: red;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.8);
        }

        .nav-tabs-custom {
            margin-bottom: 0;
            box-shadow: none;
            position: relative;
        }

        span.lineOne {
            line-height: 24px !important;
            height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .lineOne.left{
            width: 90%;
            float: left;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 5px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -10px;
        }

        .table-detail select {
            text-indent: 0 !important;
            padding-left: 0 !important;
            margin-left: -4px !important;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }
        
        .gray td{
            color:#CCCCCC !important;
        }

        .fixed-table-box .fixed-table_header th,.fixed-table-box .fixed-table_body td{
            border-right: 1px solid #cbcbcd;
        }

        .t1 th,.t1 td{
            height: 0px;
            border: 0;
        }

        table.ui_dialog,.ui_inner{
            border: 0;
        }
        .table-hover>tbody>tr:hover{
            background-color:#ffffff;
        }

        .enableClick{
            cursor: pointer;
            color: #228bee;
        }

        .ui_dialog,.ui_inner,table.ui_border{
            border: 0 !important;
        }

        .fixed-table_body .red-s{
            color: red;
        }
        

        .overdue{
            color: red;
        }

        .t-overflow{
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
        }
        .fixed-table_header tr th.t-write{
            background-color: #fff !important;
        }

        .t-status{
            width: 86%;
            text-align: center;
            float: left;
            line-height: 23px;
        }
        .border-b{
            border-bottom: 1px solid red;
        }

        .content td{
            background-color: #ffffff;
        }

        .zw td{
            background-color: #f9f9f9;
            position: relative;
        }
        .fixed-table_header .tdbox{
            background-color: #ccc;
        }

        .pm-list {
            border: 0;
        }
        .pm-list td,.pm-list th{
            height: 28px;
        }
        
        .pm-list tr td,.pm-list tr th{
            border:1px solid #ddd;
            text-align: center;
        }
        /* .pm-list tr:nth-child(2n+1) td{
            height: 10px;
        } */

        .xq{
            background-color: #228bee;text-align: center;width: 150px;height: 20px;
            line-height: 20px;position:absolute;top:0;
            cursor: pointer;
            color: #fff
        }

        .xq-person{
            width: 50px;
            background-color: #eee;
            color: #333;
            position: absolute;
            text-align: center;
        }

        .icon-weibiaoti12{
            color: #228bee;
            font-size: 40px;
            cursor: pointer;
        }
        .search-box{
            width:300px;display: inline-block;position: relative;
            text-align: left;
            z-index: 10;
            background-color: #fff
        }

        .search-input{
            border: 1px solid #ddd;
        }
        
        .search-box-enter-active,.search-box-leave-active{
            transition:all 1s;
        }
        .search-box-enter,.search-box-leave-to{
            left: -600px;
        }
        .search-box-enter-to,.search-box-leave{
            left:-0;
        }

        .search-box input{
            width: 275px;
            outline: none;
            border:0;
            padding-left: 3px;
        }
        .search-box .icon-search{
            position:absolute;
            right: 2px;
            top: 1px;
            color: #999
        }
        .search-box .search-result{
            max-height:300px;overflow: auto;
            border:1px solid #ddd;
            border-top: 0;
        }
        .search-box p{
            margin: 0;
            padding: 5px;
            cursor: pointer;
        }
        .search-box p:hover{
            background-color: #FADF8E;
        }
        .t-left{
            text-align: left !important;
            padding-left:3px;
            color: #228bee;
            cursor: pointer;
            position: relative;
        }
        .canvas-box .lineOne{
            height: 20px;
            line-height: 20px !important;
        }
        .fixed-table_header {
            border: 0;
        }
        span.line{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .head-t{
            width:100%;border:0;margin-bottom: 10px
        }
        .head-t td{
            text-align: center;width: 40%;font-size: 20px;font-weight: bold;
        }

        .head-t td.center{
            width: 20%;
        }
        .head-t td .customize{
            position:absolute;font-weight: normal;font-size: 12px;bottom: 0;margin-left: 10px;cursor: pointer;
        }
        .head-t td .customize .icon-add1{
            color: #8bc34a;
            font-size: 12px;
            margin-right: 5px
        }

        .group-box{
            width: 500px;margin: 0 auto;position: relative;
        }

        .group-box .list{
            position: absolute;border: 1px solid #ddd;overflow: hidden;z-index: 10;
            text-align: left;width: 500px;padding-right: 10px;background: #fff;
        }
        .group-box .list span{
            font-weight: normal;
            font-size: 12px;
            margin-left: 10px;
            cursor: pointer;
            width: 110px;
            float: left;
        }

        .group-box .list span.selected{
            color: #228bee;
        }

        .icon-zk,.icon-sq{
            position:absolute;
            color: #2a8cec;
            font-size: 12px;
            cursor: pointer;
            right: 3px;
            top: 26px;
            z-index: 10;
        }
        .icon-fujian{
            color: #999;
            position: absolute;
            top:7px;
            right: 0;
            font-size: 14px
        }

        .icon-bianji{
            cursor: pointer;
            color: #666
        }
        .slide-box {
            display: -webkit-box;
            -webkit-overflow-scrolling: touch;
            height: 34px;
            line-height: 34px;
            /* background: #2a8cec; */
            width: 100%;
            padding-left: 5px;
            border-bottom: 1px solid #989898;
        }
        .slide-box1 {
            display: -webkit-box;
            /* overflow-x: scroll; */
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            height: 30px;
        }
        .lefts {
            text-align: center;
            color: #fff;
            /* background-image: url(/dist/img/tabApp.png); */
            margin-left: 8px;
            margin-right: 8px;
            /* background-size: 100% 100%; */
            padding: 4px 15px 3px 15px;
            background: #228bee;
            z-index: 999;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
        .rights {
            text-align: center;
            color: #000;
            font-size: 14px;
            margin-left: 8px;
            margin-right: 8px;
            margin-top: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
        
<section class="content" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div v-if="classificationList.length>1" style="overflow: hidden;top: 0;left: 0;width: 100%;margin-bottom: 10px">
        <div class="slide-box">
            <div class="rights">
                <span v-for="(item,i) in classificationList" :class="item.selected? 'lefts':'rights'" 
                    style="height: 30px" @click="classificationSelected(item)">
                    {{item.leftName+'/'+item.rightName}}
                </span>
            </div>
        </div>
    </div>
    <div class="templateStyle">
        <div class="nav-tabs-custom oaReportNav">
            <div style="height: 25px; margin-bottom: 10px;position: relative;">
                <!-- <i class="iconfont icon-weibiaoti12" @click="searchBoxShow"></i> -->
                <div class="search-box">
                    <div class="search-input">
                        <input type="text" placeholder="关键字" @click="searchBoxShow($event)" @keyup.delete="searchKey($event)" @keyup="searchKey($event)"/>
                        <i class="iconfont icon-search"></i>
                    </div>
                    <div v-show="searchBoxIsShow" class="search-result">
                        <template v-for="(item,i) in list">
                            <p :dd="item.isShow" v-if="item.isShow==undefined || item.isShow" @click="positioning(item.ID)">{{item.PRO_NAME}}</p>
                        </template>
                    </div>
                </div>
                <input type="button" style="position:absolute;right: 0;" v-if="authorityList.cpLeader" value="新增需求" class="btn oaBtn btn-sm pull-right" @click="addPro('add',1,'cp')">
            </div>
        </div>
    </div>
    <table class="head-t">
        <tr class="zw">
            <td></td>
            <td class="center"></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3" style="height:80px;vertical-align: top;">
                <div style="position:relative;">需求<span class="customize" @click="customGrouping"><i class="iconfont icon-add1"></i>自定义分组</span></div>
                <div class="group-box">
                    <div class="list" :style="'margin-top: 20px; '+(groupBoxShow?'':'height:24px')">
                        <span :class="'lineOne '+(groupBoxVal==''?'selected':'')" @click="selectGroup('')">全部</span>
                        <span :class="'lineOne '+(groupBoxVal=='1'?'selected':'')" @click="selectGroup('1')">进行中</span>
                        <span :class="'lineOne '+(groupBoxVal=='3'?'selected':'')" @click="selectGroup('3')">已完成</span>
                        <span v-for="item in groupList" :class="'lineOne '+(groupBoxVal==item.id?'selected':'')" @click="selectGroup(item.id)">{{item.groupName}}</span>
                    </div>
                    <i :class="'iconfont ' + (groupBoxShow?'icon-sq':'icon-zk') " @click="show()"></i>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <span v-if="!classification.leftEditStatus">{{classification.leftName}}</span>
                <input class="cf" type="text" v-if="classification.leftEditStatus" v-model="classification.leftName" style="width:85px;height:25px"/>
                <i class="iconfont icon-bianji" v-if="!classification.leftEditStatus && classification.createUser==currentUser.id" @click="eidtClassification($event,'left')"></i>
            </td>
            <td class="center"></td>
            <td>
                <span v-if="!classification.rightEditStatus">{{classification.rightName}}</span>
                <input class="cf" type="text" v-if="classification.rightEditStatus" v-model="classification.rightName" style="width:85px;height:25px"/>
                <i class="iconfont icon-bianji" v-if="!classification.rightEditStatus && classification.createUser==currentUser.id"  @click="eidtClassification($event,'right')"></i>
            </td>
        </tr>
    </table>
    <div :class="classificationList.length>1?'iframeH7':'iframeH6'" style="overflow-y: auto;position: relative;">
    <div v-if="list.length==0" style="text-align: center;font-size: 30px;font-weight: bold;">暂无数据</div>
    <template v-for="(item,i) in list">
        <table :id="item.ID" class="fixed-table_header" :style="i<list.length-1?'margin-bottom:20px':''">
            <tr>
                <td class="tdbox" :style="(item.level2List==undefined?'vertical-align: top;':'')+' width:40%;padding:10px 0 10px 10px;position: relative;'">
                    <table class="pm-list" style="width: 100%;">
                        <tr>
                            <th>{{classification.leftName}}分解</td>
                            <th style="width:60px">开始时间</td>
                            <th style="width:60px">结束时间</td>
                            <th style="width:30px">天数</td>
                            <th style="width:60px">负责人</td>
                            <th style="width:80px">状态</td>
                        </tr>
                        <tr v-if="item.level2List==undefined">
                            <td colspan="6">暂无</td>
                        </tr>
                        <template v-for="(level2Item,i) in item.level2List">
                            <tr class="content" >
                                <td class="t-left" @click="addTrack('decomposition',level2Item.ID)">
                                    <span :style="level2Item.hasAttach?'padding-right: 13px;':''" class="line">{{level2Item.PRO_NAME}}</span>
                                    <i v-if="level2Item.hasAttach" class="iconfont icon-fujian"></i>
                                </td>
                                <td>{{level2Item.START_TIME==""?"":new Date(level2Item.START_TIME).Format("M月d日")}}</td>
                                <td>{{level2Item.END_TIME==""?"":new Date(level2Item.END_TIME).Format("M月d日")}}</td>
                                <td>{{level2Item.days}}天</td>
                                <td>{{level2Item.PRO_PRINCIPAL_NAME}}</td>
                                <td>
                                    <span v-if="level2Item.STATUS==1" :class="(level2Item.statusChanged?'border-b':'')">未开始</span>
                                    <span v-if="level2Item.STATUS==2" :class="(level2Item.statusChanged?'border-b':'')">进行中</span>
                                    <span v-if="level2Item.STATUS==3" :class="(level2Item.statusChanged?'border-b':'')">已完成</span>
                                    <span v-if="level2Item.STATUS==4" style="color: red" :class="(level2Item.statusChanged?'border-b':'')">已完成-待审核</span>
                                    <span v-if="level2Item.STATUS==5" :class="(level2Item.statusChanged?'border-b':'')">已撤销</span>
                                    <span v-if="level2Item.STATUS==6" :class="'overdue'+ (level2Item.statusChanged?'border-b':'')">已逾期</span>
                                </td>
                            </tr>
                            <!-- <tr class="zw" v-if="i<item.level2List.length-1">
                                <td colspan="6">
                                </td>
                            </tr> -->
                        </template>
                    </table>
                </td>
                <td class="tdbox canvas-box" style="position: relative;">
                    <canvas class="canvas" id="canvas" style="position:absolute;top: 35px;"></canvas>
                    <div class="xq-person">{{item.PRO_PRINCIPAL_NAME}}</div>
                    <div class="xq" v-if="authorityList.cpLeader && classification.createUser==currentUser.id" @click="addPro('decomposition',item.ID,'cp')"><span class="lineOne" :proDesc="item.PRO_DESC">{{item.PRO_NAME}}</span></div>
                    <div class="xq" v-else-if="item.isKfLeader=='1'" @click="addPro('decomposition',item.ID,'kf')"><span class="lineOne" :proDesc="item.PRO_DESC">{{item.PRO_NAME}}</span></div>
                    <div class="xq" v-else><span class="lineOne" :proDesc="item.PRO_DESC">{{item.PRO_NAME}}</span></div>
                </td>
                <td class="tdbox" :style="(item.level3List==undefined?'vertical-align: top;':'')+'width:40%;padding:10px 10px 10px 0;position: relative;' ">
                    <table class="pm-list" style="width: 100%;">
                        <tr>
                            <th>{{classification.rightName}}分解</td>
                            <th style="width:60px">开始时间</td>
                            <th style="width:60px">结束时间</td>
                            <th style="width:30px">天数</td>
                            <th style="width:60px">负责人</td>
                            <th style="width:80px">状态</td>
                        </tr>
                        <tr v-if="item.level3List==undefined">
                            <td colspan="6">暂无</td>
                        </tr>
                        <template v-for="(level3Item,i) in item.level3List">
                            <tr class="content">
                                <td class="t-left" @click="addTrack('decomposition',level3Item.ID,item.isKfLeader)">
                                    <span :style="level3Item.hasAttach?'padding-right: 14px;':''" class="line">{{level3Item.PRO_NAME}}</span>
                                    <i v-if="level3Item.hasAttach" class="iconfont icon-fujian"></i>
                                </td>
                                <td>{{level3Item.START_TIME==""?"":new Date(level3Item.START_TIME).Format("M月d日")}}</td>
                                <td>{{level3Item.END_TIME==""?"":new Date(level3Item.END_TIME).Format("M月d日")}}</td>
                                <td>{{level3Item.days}}天</td>
                                <td>{{level3Item.PRO_PRINCIPAL_NAME}}</td>
                                <td>
                                    <span v-if="level3Item.STATUS==1" :class="(level3Item.statusChanged?'border-b':'')">未开始</span>
                                    <span v-if="level3Item.STATUS==2" :class="(level3Item.statusChanged?'border-b':'')">进行中</span>
                                    <span v-if="level3Item.STATUS==3" :class="(level3Item.statusChanged?'border-b':'')">已完成</span>
                                    <span v-if="level3Item.STATUS==4" style="color: red" :class="(level3Item.statusChanged?'border-b':'')">已完成-待审核</span>
                                    <span v-if="level3Item.STATUS==5" :class="(level3Item.statusChanged?'border-b':'')">已撤销</span>
                                    <span v-if="level3Item.STATUS==6" :class="'overdue'+ (level3Item.statusChanged?'border-b':'')">已逾期</span>
                                </td>
                            </tr>
                            <!-- <tr class="zw" v-if="i<item.level3List.length-1">
                                <td colspan="6">
                                </td>
                            </tr> -->
                        </template>
                    </table>
                </td>
            </tr>
        </table>
    </template>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $(function () {
        $("body").on("mouseover", ".lineOne,.line", function (e) {
            if($(this).parents(".group-box").length)
                return false;
            if ($(".div-td-content-more").is(":hidden")) {
                if($(this).hasClass("lineOne")){
                    var text = $(this).attr("proDesc");
                    if (text != "") {
                        text = "<i></i>" + text;
                        $(".div-td-content-more").html(text).css({
                            "width": $(".canvas-box").outerWidth() + "px",
                            "left": $(".canvas-box").offset().left,
                            "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                        }).show();
                        $(".div-td-content-more i").css("left",$(".canvas-box").outerWidth()/2-8)
                        e.stopPropagation();
                    }
                }else if($(this).hasClass("line")){
                    var text = $(this).text();
                    if (text != "") {
                        text = "<i></i>" + text;
                        $(".div-td-content-more").html(text).css({
                            "width": $(this).outerWidth()+4 + "px",
                            "left": $(this).offset().left-4,
                            "top": ($(this).offset().top + $(this).outerHeight()) + 4 + "px"
                        }).show();
                        $(".div-td-content-more i").css("left",20)
                        e.stopPropagation();
                    }
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("mouseout", ".lineOne,.line", function () {
            $(".div-td-content-more").hide();
        });

        $("body").on("click",".cf",  function (e) {
            e.stopPropagation();
        });

        $("body").on("click",  function () {
            if(app.classification.leftEditStatus==true || app.classification.rightEditStatus==true){
                app.classification.leftEditStatus = false;
                app.classification.rightEditStatus = false;
                $.wyui.postMethod("/projectTrack/saveClassification.json", app.classification, function (data) {
                });
            }
        });
    });
</script>
<script type="text/javascript">
    function refresh() {
        console.log('+++++++++'+$("#nowPage").text());
        $.wyui.page.getByPage();

    }

    var app = new Vue({
        el: '#app',
        data: {
            zw:true,
            searchBoxIsShow:false,
            groupBoxShow:false,
            groupBoxVal:'',
            classificationCreateUser:'',
            currentUser: getCurrentUser(),
            classification:{},
            classificationList:[],
            list: [
                
            ],
            groupList: [],
            searchList: [
                
            ],
            authorityList:{cpLeader:false,kfLeader:false,superLeader:false},	
            companyList: [],
            keyWord:""
        },
        methods: {
            refresh:function(){
                var that = this;
                //项目管理
                top.getRedHot();
                $.wyui.postMethod(urlConfig.system.rightOp.getRightOpByUserId, {userId: currentUser.id}, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        that.authorityList[data[i].eName] = true;
                    }
                },true);


                $.wyui.postMethod("/projectTrack/getPtList.json", {
                    userId:  that.authorityList.superLeader?"":getCurrentUser().id,
                    purview: that.authorityList,
                    groupVal:that.groupBoxVal,
                    keyWord:that.keyWord,
                    classificationCreateUser:that.classificationCreateUser
                }, function (data) {
                    that.list = data.ptList;

                    data.classificationList.forEach((ele,i)=>{
                        ele.leftEditStatus = false;
                        ele.rightEditStatus = false;
                        if(that.classificationCreateUser==""){
                            ele.selected = (i==0?true:false);
                            that.classification = data.classificationList[0];
                        }else if(ele.createUser == that.classificationCreateUser){
                            ele.selected = true;
                            that.classification =  ele;
                        }else
                            ele.selected = false;
                    })
                    that.classificationList = data.classificationList;

                    
                    that.curveOutput();
                },true);

                $.wyui.postMethod("/projectTrack/getGroupLevel1ByUserId.json", {
                    userId: getCurrentUser().id,
                    classificationId: that.classification.id,
                }, function (data) {
                    that.groupList = data;
                });
            },
            classificationSelected:function(item){
                this.classificationList.forEach((element,i) => {
                    if(item.createUser==element.createUser)
                        element.selected = true;
                    else
                        element.selected = false;
                    this.$set(element,'selected',element.selected)
                })
                this.classification = item;
                this.classificationCreateUser = item.createUser;
                this.groupBoxVal='';
                this.refresh();
            },
            show:function(){
                this.groupBoxShow=!this.groupBoxShow;
            },
            selectGroup:function(groupId){
                this.groupBoxVal=groupId;
                this.refresh();
            },
            eidtClassification:function(e,type){
                
                if(type=="left"){
                    this.classification.leftEditStatus =true;
                    this.classification.rightEditStatus =false;
                }
                else if(type=="right"){
                    this.classification.leftEditStatus =false;
                    this.classification.rightEditStatus =true;
                }
                
                setTimeout(function(){
                    $(".cf").focus();
                    $(".cf").select();
                },100)
                e.stopPropagation();
            },
            curveOutput:function(){
                var that = this;
                setTimeout(() => {
                    for(var i=0;i<that.list.length;i++){
                        var leftTop = $(".pm-list").eq(i*2).height();
                        var rightTop = $(".pm-list").eq(i*2+1).height();

                        var cpList =  that.list[i].level2List;
                        var kfList =  that.list[i].level3List;
                        
                        var cBox = $(".canvas-box").get(i);
                        var cBheight = cBox.offsetHeight -20-25 ;
                        var cBwidth = cBox.offsetWidth;
                        var c = $(".canvas").get(i);
                        c.width = cBwidth;
                        c.height = cBheight;
                        c.style.width = cBwidth + "px";
                        c.style.height= cBheight + "px";

                        var ctx= c.getContext("2d");
                        ctx.lineWidth = 1.5;
                        ctx.strokeStyle ="#666";
                        ctx.beginPath();

                        var topL = cBheight/2 - (leftTop-28)/2;
                        var topR= cBheight/2 - (rightTop-28)/2;

                        for(var j=0;cpList!=undefined &&j<cpList.length;j++){
                            ctx.moveTo(0, topL+j*28+13);
                            ctx.bezierCurveTo(80,topL+j*28+13,cBwidth/2,topL+j*28+13,cBwidth/2,cBheight/2);
                        }
                        for(var j=0;kfList!=undefined &&j<kfList.length;j++){
                            ctx.moveTo(cBwidth, topR+j*28+13);
                            ctx.bezierCurveTo(cBwidth,topR+j*28+13,cBwidth/2,topR+j*28+13,cBwidth/2,cBheight/2);
                        }
                        ctx.stroke();

                        //设置需求div位置
                        $(cBox).find("div").css("top",cBheight/2+24);
                        $(cBox).find("div").css("left",cBwidth/2-75);
                        
                        $(cBox).find(".xq-person").css("top",cBheight/2+44);
                        $(cBox).find(".xq-person").css("left",cBwidth/2-25);

                        
                    }
                }, 100);
            },
            searchBoxShow:function(e){
                this.searchBoxIsShow = true;
                e.stopPropagation();
            },
            searchBoxHide:function(){
                this.searchBoxIsShow = false;
            },
            searchKey:function(){
                var keyVal = $(".search-box input").val();
                var that =this;
                this.list.forEach((element,i) => {
                    if(keyVal!='' && element.PRO_NAME.indexOf(keyVal) == -1)
                         element.isShow = false;
                    else
                         element.isShow = true;
                    Vue.set(that.list,i,element);
                });
            },
            positioning:function(val){
                var top = $("table[id="+val+"]").get(0).offsetTop;
                $(".iframeH6").animate({scrollTop:top},600);
                $(".iframeH7").animate({scrollTop:top},600);
            },
            addPro:function(type,projectId,jiaose) {
                var pageT ="",title="";
                if(type == "decomposition")
                    pageT="&pageType=decomposition&projectId="+projectId+"&jiaose="+jiaose;
                else
                    pageT="&pageType=add"

                if(jiaose=='kf')
                    title = this.classification.rightName + "分解";
                else if(type == "decomposition")
                    title = this.classification.leftName + "分解";
                else
                    title = "新增需求";

                $.dialog({
                    content: 'url:addPro.html?rightName='+ this.classification.rightName+'&leftName='+this.classification.leftName + pageT,
                    title:"<div style='font-size:20px'>"+title+"</div>",//新增项目
                    width: 650,
                    height: 450,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            addTrack:function(type, projectId,isKfLeader) {
                if(projectId == undefined || projectId == "")
                    return false;
                $.dialog({
                    content: 'url:addTrack.html?projectId='+projectId+"&isKfLeader="+isKfLeader,
                    title: "<div style='font-size:20px'>进度跟踪</div>",
                    width: 650,
                    height: 400,
                    max: false,
                    min: false,
                    lock: true
                });
            }, 
            customGrouping:function(){
                var that = this;
                $.dialog({
                    content: 'url:customGrouping.html?classificationId='+that.classification.id+'&classificationCreateUser='+that.classification.createUser,
                    title: "<div style='font-size:20px'></div>",
                    width: 750,
                    height: 450,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            search: function () {
                this.refresh();
            }
        },
        mounted: function () {
            var that = this;
            this.refresh();
        }
    });
    function refresh(toStart) {
        if(toStart)
            app.pageIndex=1;
        app.refresh()
    }
    //分页
    // $.wyui.page.dataUrl = server.ip + "/projectTrack/getPtList.json";
    // $.wyui.page.queryParams.pageType = $.wyui.page.urlParams.pageType;
    // $.wyui.page.queryParams.userId = getCurrentUser().id;
    // $.extend($.wyui.page.queryParams);
    // if($.wyui.page.urlParams.page){
    //     console.log($.wyui.page.queryParams.requestPage,$.wyui.page.urlParams.page )
    //     $.wyui.page.queryParams.requestPage = $.wyui.page.urlParams.page;
    // }
    //console.log('+++++++++'+$("#nowPage").text());
    // $.wyui.page.getByPage_callback = function (r) {
    //     app.list = r;
    //     //console.log(app.list.main)

    //     document.getElementById("scrollDiv").scrollTop = 0;
    //     $(".iframeH3").css("height","");
    //     setTimeout(() => {
    //         var contentHeight = $(".fixed-table_body-wraper").height();
    //         var winHeight = $(window).height()-100 -20;
    //         if(winHeight>contentHeight)
    //             app.zw =false;
    //     }, 300);
    // };

    // $.wyui.page.getByPage_scroll_callback = function (list) {
    //     if (list.length < 30) {
    //         isLoad = false;
    //     } else {
    //         for (var i = 0; i < list.length; i++) {
    //             app.list.push(list[i]);
    //         }
    //         isLoad = true;
    //     }
    // };
   
</script>
<script>
    $("body").on("click",function(e){
        e.stopPropagation();
        app.searchBoxIsShow = false;
    });

    setInterval(() => {
        $(".flashing").fadeOut(500).fadeIn(200); 
    }, 1000);
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
</script>
</body>
</html>